import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { SharedDataService } from '../../service/shared-data.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements AfterViewInit {

  searchtext = "";
  constructor(private sharedData: SharedDataService) {

  }
  
  shareData() {
    let searchtext = this.searchtext;
    this.sharedData.setData(searchtext);
  }
  // search(){
  //   // 共享数据
  //   this.shareData();
  //   // 分发通知
  //   this.refreshOthers()
  // }


  // search(input: HTMLInputElement) {
  //   console.log("input.value");
  //   console.log(input.value)
  //   this.searchtext = input.value;
  //   // 共享数据
  //   this.shareData();
  //   // 分发通知
  //   this.refreshOthers()
  // }

  // 注意只会返回第一个标记成#searchinput的元素
  @ViewChild("searchinput",{static:true}) searchinput:ElementRef<HTMLInputElement>|null=null;

  // Angular提供了几个生命周期钩子来帮助你管理组件的生命周期。
  // 对于@ViewChild，重要的是理解ngAfterViewInit和ngAfterContentInit这两个钩子。
  // •ngAfterViewInit：这个钩子在组件视图及其子视图（如果有）初始化完成后被调用。
  // 此时，所有通过@ViewChild或@ViewChildren装饰器访问的元素和子组件都已准备好使用。
  // •ngAfterContentInit：这个钩子在组件的内容投影初始化后被调用。
  // 如果你的@ViewChild引用的是内容子树的一部分，那么你应该在这个钩子中访问它。
  ngAfterViewInit() {
    // 确保视图初始化完成后才访问子元素
    console.log(this.searchinput!.nativeElement.value);
  }
  search() {
    this.searchtext = this.searchinput?.nativeElement.value || "";
    // 共享数据
    this.shareData();
    // 分发通知
    this.refreshOthers()
  }
 
  


  refreshOthers() {
    // 分发通知给订阅者
    this.sharedData.triggerUpdate();
  }
}
